<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<!-- #ifndef H5 -->
	<u-sticky h5-nav-height="0" bg-color="transparent">
		<u-navbar
			:is-back="false"
			:is-fixed="false"
			title="学习"
			:border-bottom="false"
			:title-bold="true"
			:title-color="$theme.navColor"
			:background="{ background: $theme.navBgColor }"
		></u-navbar>
	</u-sticky>
	<!-- #endif -->
	<view class="ins">
		<!-- 搜索 -->
		<navigator class="ins-search px-[24rpx] py-[14rpx] bg-white" url="/pages/study/search">
			<u-search placeholder="请输入关键词搜索" disabled :show-action="false"></u-search>
		</navigator>
		<z-paging ref="paging" v-model="activityData" @query="queryList" :fixed="false" height="100%" use-page-scroll>
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in activityData" :key="item.id" btn-width="120">
				<navigator :url="`/packages/pages/msg_course/msg_course?id=${item.course.id}`">
					<view class="ins-card flex bg-white mx-[20rpx] my-[10rpx] px-[20rpx] py-[20rpx]">
						<view class="mr-[20rpx]">
							<u-image :src="item.course.image" width="180" height="180"></u-image>
						</view>
						<view class="news-card-content flex flex-col justify-between flex-1">
							<view class="news-card-content-title text-base text-lg">{{ item.course.name }}</view>
							<view class="text-sm my-[16rpx] flex u-col-center justify-between">
								<u-line-progress
									:show-percent="false"
									height="16"
									class="u-progress"
									active-color="#3968FF"
									:percent="item.progress"
								></u-line-progress>
								<view class="text-sm text-muted ml-2">{{item.progress}}%</view>
							</view>
						
							<view class="text-xs w-full flex justify-between mt-[12rpx]">
								<view>时长：{{ item.course.alltime }}</view>
								<view class="text-error" v-if="item.course.vip == 1">会员</view>
								<view style="color: #3968ff" v-else>免费</view>
							</view>
						</view>
					</view>
				</navigator>
			</u-swipe-action>
		</z-paging>

		<tabbar />
	</view>
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue';
import { courseList } from '@/api/shop';
import { onShow } from '@dcloudio/uni-app'

const paging = shallowRef();
const activityData: any = ref([]);

const queryList = async (page_no: number, page_size: number) => {
	try {
		const { lists } = await courseList({
			keys: '',
			page_no,
			page_size
		});
		activityData.value = lists;
		paging.value.complete(lists);
	} catch (e) {
		console.log('报错=>', e);
		//TODO handle the exception
		paging.value.complete(false);
	}
};

onShow(() => {
    paging.value.reload();
})
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.ins {
	&-search {
		margin-bottom: 2rpx;
	}

	&-card {
		border: 1px solid #eee;
		border-radius: 15rpx;
		align-items: center;
	}
}
</style>
